<template>
  <view class="slide-popup-container" v-show="visible">
    
     <!-- 弹窗内容区 -->
    <view 
      class="slide-popup-content"
      :style="{ 
        height: contentHeight + 'rpx'
      }"
      @touchstart.stop="onTouchStart"
      @touchmove.stop="onTouchMove"
      @touchend.stop="onTouchEnd"
    >
      <!-- 顶部拖拽条 -->
      <view class="slide-handle-bar"></view>
      
      <!-- 标题区域 -->
      <view class="slide-title" v-if="title">
        <text>{{ title }}</text>
        <view class="close-btn" @click.stop="closePopup">×</view>
      </view>
      
      <!-- 内容区域 -->
      <view class="slide-body">
        <slot></slot>
      </view>
	  
	  <!-- 右下角按钮 -->
	 <!-- <view class="float-button" @click="handleAddPowerBank()">
	    <uni-icons type="plus" size="28" color="#fff"></uni-icons>
	  </view> -->
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';

// 接收外部传入的参数
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  minHeight: { // 最小高度（默认 700rpx）
    type: Number,
    default: 270 
  },
  maxHeight: { // 最大高度（可自定义，比如 1400rpx）
    type: Number,
    default: 1400 
  },
  closeOnOverlayClick: {
    type: Boolean,
    default: true
  }
});

// 定义抛出的事件
const emit = defineEmits([
  'update:visible',
  'close'
]);

// 状态变量
const contentTranslateY = ref(0); // 内容区域Y轴偏移量
const contentHeight = ref(0);     // 内容区域高度
const isDragging = ref(false);    // 是否正在拖拽
const touchStartY = ref(0);       // 触摸开始Y坐标
const initialHeight = ref(0);     // 拖拽开始时的初始高度

// 计算属性：内容高度（限制在 minHeight 和 maxHeight 之间）
const computedContentHeight = computed(() => {
  return Math.min(Math.max(contentHeight.value, props.minHeight), props.maxHeight);
});

// 打开弹窗动画
const openPopup = () => {
  contentHeight.value = props.minHeight; // 初始高度为 minHeight
  contentTranslateY.value = contentHeight.value; // 初始在底部（偏移量=高度）
  
  setTimeout(() => {
    contentTranslateY.value = 0; // 上滑到屏幕底部
  }, 50);
};

// 关闭弹窗动画
const closePopup = () => {
  if (!props.visible) return;
  
  contentTranslateY.value = contentHeight.value; // 下滑隐藏
  
  setTimeout(() => {
    emit('update:visible', false);
    emit('close');
  }, 300);
};

// 触摸事件处理
const onTouchStart = (e) => {
  if (isDragging.value) return;
  
  isDragging.value = true;
  touchStartY.value = e.touches[0].clientY;
  initialHeight.value = contentHeight.value; // 记录拖拽前的高度
};

const onTouchMove = (e) => {
  if (!isDragging.value) return;
  
  const currentY = e.touches[0].clientY;
  const diff = currentY - touchStartY.value; // 计算手指移动距离
  
  // 向上拖拽（diff 为负）时增加高度，向下拖拽（diff 为正）时减少高度
  let newHeight = initialHeight.value - diff; 
  
  // 限制高度在 minHeight 和 maxHeight 之间
  newHeight = Math.min(Math.max(newHeight, props.minHeight), props.maxHeight);
  
  contentHeight.value = newHeight; // 更新弹窗高度
  contentTranslateY.value = Math.min(diff, contentHeight.value); // 同步偏移量
  
};

const onTouchEnd = () => {
  if (!isDragging.value) return;
  
  isDragging.value = false;
  contentHeight.value = computedContentHeight.value; // 确保高度在有效范围
  contentTranslateY.value = 0; // 重置偏移量
};

// 监听 visible 变化
watch(() => props.visible, (newVal) => {
  if (newVal) {
    openPopup();
  }
});

onMounted(() => {
  if (props.visible) {
    openPopup();
  }
});

// // 新增充电宝
// const handleAddPowerBank = () =>{
// 	uni.navigateTo({
// 		url:`/pages/qrCode/index`
// 	})
// }
</script>

<style lang="scss" scoped>
.slide-popup-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  z-index: 200;
  // overflow: hidden;
}

.slide-popup-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  // height: 200vh;
  background-color: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  overflow: hidden;
  
  .slide-handle-bar {
    width: 200rpx;
    height: 8rpx;
    background-color: #ccc;
    border-radius: 3rpx;
    margin: 20rpx auto;
  }
  
  .slide-title {
    position: relative;
    padding: 0 40rpx 20rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
    border-bottom: 1rpx solid #eee;
	
	.close-btn {
	  position: absolute;
	  right: 40rpx;
	  top: 0;
	  font-size: 48rpx;
	  color: #999;
	}
  }
  
  .slide-body {
    padding: 32rpx 40rpx;
    max-height: calc(100vh - 200rpx); 
    overflow-y: auto;
  }
 //  .float-button {
	  
	//   width: 150rpx;
	//   height: 150rpx;
	//   background: #2197ef;
	//   border-radius: 50%;
	//   display: flex;
	//   align-items: center;
	//   justify-content: center;
	//   box-shadow: 0 6rpx 12rpx rgba(33, 151, 239, 0.3);
	//   z-index: 999;
	//   transition: all 0.2s;
	  
	//   &:active {
	//     transform: scale(0.9);
	//     opacity: 0.8;
	//   }
	// }
}


</style>